<template>
  <div id="main">
    <!-- 头部轮播图 -->
    <div class="lunbotu">
      <h2>|精选新品 NEW</h2>
      <el-carousel :interval="2000" type="card" height="300px">
        <el-carousel-item v-for="(item, index) in lunbotu_images" :key="index">
          <img
            class="lunbotu_image"
            :src="item.imgUrl"
            alt
            @click="goToGoodsDetail(item.id)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 中间推荐商品 -->
    <div class="recommend">
      <h2>|推荐商品 RECOMMEND</h2>
      <recommend></recommend>
    </div>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 潮电酷玩 ELECTRONICS -->
    <div class="electronics">
      <h2>|潮电酷玩 ELECTRONICS</h2>
      <electronics></electronics>
    </div>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 闲置换钱 -->
    <!-- <div class="second-hand">
      <h2>|闲置换钱 SECOND-HAND</h2>
      <secondhand></secondhand>
    </div> -->
    <!-- 分割线 -->
    <el-divider></el-divider>
  </div>
</template>

<script>
import recommend from "./recommend.vue";
import electronics from "./electronics.vue";
import secondhand from "./second-hand.vue";
import { selectAllLunBoTu } from "../../../api/lunbotu/index.js";
export default {
  created() {
    //  页面创建时查询轮播图的信息
    selectAllLunBoTu().then(
      (res) => {
        this.lunbotu_images = res;
      },
      (err) => {
        console.log(err);
      }
    );
  },
  components: {
    recommend,
    electronics,
    secondhand,
  },
  data() {
    return {
      lunbotu_images: [
        {
          id: 1,
          imgUrl:
            "https://img.alicdn.com/imgextra/i4/6000000002436/O1CN01r0sGKc1TrjRkVM8w8_!!6000000002436-0-octopus.jpg",
        },
        {
          id: 2,
          imgUrl: "https://img.alicdn.com/simba/img/TB14dt2knnI8KJjy0FfSuwdoVXa.jpg",
        },
        {
          id: 3,
          imgUrl:
            "https://img.alicdn.com/imgextra/i1/6000000000720/O1CN01QON2dX1HBnnbupK0g_!!6000000000720-0-octopus.jpg",
        },
        {
          id: 4,
          imgUrl: "https://img.alicdn.com/tps/i4/TB1zVa5eP39YK4jSZPcSutrUFXa.jpg",
        },
        {
          id: 5,
          imgUrl:
            "https://aecpm.alicdn.com/imgextra/i2/2757558756/O1CN01QOAKlh2EYIa56RJ6y_!!2757558756-0-alimamazszw.jpg",
        },
        {
          id: 6,
          imgUrl:
            "https://aecpm.alicdn.com/imgextra/i2/3253072988/O1CN01McgUqd1XwY4KgwUSx_!!3253072988-0-alimamazszw.jpg",
        },
      ],
    };
  },
  methods: {
    goToGoodsDetail(id) {
      //带参数跳转
      // 使用 push - params 方式传递参数，参数将不会在地址栏中显示
      //this.$router.push({ name: "商品", params: { goodsID: id } });
    },
  },
};
</script>

<style>
.lunbotu {
  margin: 20px 0px;
  border-bottom: 1px solid #988a8a;
}

.lunbotu h2 {
  font-size: 30px;
}

.lunbotu_image {
  border-radius: 30px;
  width: 100%;
  height: 300px;
}

.recommend h2 {
  font-size: 30px;
}

.electronics h2 {
  font-size: 30px;
}
.second-hand h2 {
  font-size: 30px;
}
</style>
